<template>
  <div class="height_100">
    <page-model
      :breadHeard=breadHeard
      @backLast="backLast"
      >
        <div class="mainBox">
          <header>
            <div class="uploadData" @click="addDocList">添加</div>
          </header>
          <table class="mainTable" border="0" cellspacing="0" cellpadding="0">
            <thead>
              <th>序号</th>
              <th>区域名称</th>
              <th>摄像头数量</th>
              <th>操作</th>
            </thead>
            <tbody v-if="cateTableData.length">
              <tr v-for="(item, index) in cateTableData" :key="item.id">
                <td>{{ index-9>0?index:('0'+index)}}</td>
                <td>{{ item.name }}</td>
                <td>{{item.count}}</td>
                <td v-if="item.name !== '其他'">
                  <span @click="writeDoc(item)">编辑</span>
                  <span @click="deleteDoc(item)">删除</span>
                </td>
              </tr>
            </tbody>
          </table>
          <div class="block" v-if="cateDataCount">
            <el-pagination
              @current-change="handleCurrentChange"
              :current-page.sync="currentPage"
              :page-size="pageSize"
              layout="total, prev, pager, next, jumper"
              :total="cateDataCount"
            ></el-pagination>
          </div>
          <!-- 当表头为空时 -->
        </div>
      <delete-alert-box
        v-if="isDelete"
        :isDelete=isDelete
        :descTips=descTips
        @Confirm=Confirm
        @Cancel=Cancel
      ></delete-alert-box>
    </page-model>
    <big-alert-box
    :title="alertTitle"
    @Cancel="closeDesc"
    @Confirm="addArea"
    v-if="isViewDesc"
    >
      <div class="alert">
        <div class="alertdes">
          <el-form :model="alertData" ref="alertData" :rules="rules" label-width="168px">
            <el-form-item label="区域名称：" prop="name">
              <el-input type="text" v-model="alertData.name" placeholder="请输入区域名称"></el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </big-alert-box>
  </div>
</template>
<script>
import { mapState } from 'vuex'
// // console.log(require)
export default {
  data () {
    return {
      breadHeard: {
        title: '区域管理',
        firstBread: '行为识别 ',
        secondBread: '区域管理'
      },
      // 当前页
      currentPage: +'',
      // 分页
      drawer: false,
      total: +'',
      index: 1,
      pageSize: 10,
      areaCount: '',
      areaId: '',
      documentName: '',
      isViewDesc: false,
      cameraDesData: {},
      flvPlayer: null,
      descTips: [],
      isDelete: false,
      alertTitle: '',
      alertData: {
        name: '',
        id: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入区域名称', trigger: ['change', 'blur'] }
        ]
      }
    }
  },
  computed: {
    ...mapState('actionRecognition', [
      'cateDataCount',
      'cateTableData'
    ])
  },
  methods: {
    backLast () {
      this.$router.push('/actionMain')
    },
    handleCurrentChange (val) {
      // // console.log(val)
      this.index = val
      this.getDataList()
    },
    // 展示列表
    getDataList () {
      const params = {
        pageSize: this.pageSize,
        index: this.index
      }
      this.$store.dispatch('actionRecognition/getAreaCateList', params).then(res => {
        // console.log(res)
      })
    },
    getItemList () {
      this.$store.dispatch('actionRecognition/getCateList').then(res => {
        // console.log(res)
      })
    },
    addDocList () {
      this.alertTitle = '添加区域'
      this.isViewDesc = true
    },
    // 弹框关闭回调
    closeDesc () {
      this.isViewDesc = false
    },
    addArea () {
      if (this.alertData.id) {
        this.$store.dispatch('actionRecognition/updateActionArea', { ...this.alertData }).then(res => {
          if (res.data.code === 200) {
            this.getDataList()
            this.$message({
              type: 'success',
              message: '编辑成功',
              duration: 500
            })
            this.isViewDesc = false
            this.alertData.id = ''
          }
        })
        return
      }
      this.$store.dispatch('actionRecognition/addActionArea', { name: this.alertData.name }).then(res => {
        if (res.data.code === 200) {
          this.getDataList()
          this.$message({
            type: 'success',
            message: '添加成功',
            duration: 500
          })
          this.isViewDesc = false
        }
      })
      // console.log('确定添加')
    },
    // 编辑文档
    writeDoc (item) {
      this.alertData.name = item.name
      this.alertData.id = item.id
      this.isViewDesc = true
    },
    // 删除文档
    deleteDoc (item) {
      this.isDelete = true
      this.areaCount = item.count
      this.areaId = item.id
      this.descTips = [{
        tips: `确定删除区域"${item.name}"？`,
        default: ''
      }]
    },
    Confirm () {
      // console.log('确定')
      const params = {
        id: this.areaId,
        count: this.areaCount
      }
      this.$store.dispatch('actionRecognition/deleteActionArea', params).then(res => {
        // console.log(res)
        if (res.data.code === 200) {
          this.$message({
            type: 'success',
            message: '删除成功',
            duration: 500
          })
          this.isDelete = false
          this.getDataList()
        }
      })
    },
    Cancel () {
      this.isDelete = false
      // console.log('取消')
    }
  },
  created () {
    this.getItemList()
    this.getDataList()
  }
}
</script>

<style scoped lang="scss">
@import "@/styles/clickBox.scss";
@import "@/styles/dataModule.scss";
  .mainBox{
    margin-top: 24px;
    margin-bottom: 0;
    min-height: calc(100% - 130px);
  }
  .selectionBox .Correlation .el-select{
    left: 70px;
  }
  .selectionBox .documentName{
    left:30px;
  }
  .selectionBox .el-input{
    left: 100px;
  }
  .selectionBox .selectDocument{
    left: 380px;
  }
  .selectionBox .reset{
    left: 480px;
  }
  ::v-deep .el-drawer__header{
  padding: 0;
  margin-bottom: 57px;
  }
  ::v-deep .el-drawer__open .el-drawer.rtl{
    width: 40% !important;
  }
.alert{
  padding: 37px 30px 0;
  .alertdesc{
    height: 450px;
    width: 100%;
  }
    ::v-deep .el-form{
    width: 800px;
    .el-input{
      width: 400px;
      .el-input__inner{
        height: 48px;
        line-height: 48px;
      }
    }
  .el-input.is-disabled .el-input__inner{
    background:rgba(248,248,248,1);
    border-radius:6px;
    border:1px solid rgba(220,220,220,1);
    color: #333333;
  }
  .el-form-item{
    margin-bottom: 32px;
  }
  .el-form-item__label{
    width: 168px !important;
    text-align: right;
    }
  .el-form-item__error{
    padding-left: 168px;
  }
  .el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:before{
          content: '*';
          color: #4868FF;
          margin-right: 4px;
    }
  }
}
</style>
